<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/include/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>插件使用示例</title>
<d:script id="jquery,om-ui" />
<d:script path="/static/om-ui/operamasks-ui-plugin.js" />
<d:css id="om-ui" />

<script type="text/javascript">
	function click(){
		alert("通过全局的事件及fn扩展属性实现点击事件.");
	}
	function changeLabel() {
		btn3.changeIcons({
			right : "${ctx}/static/icons/down.png"
		})
	}
	function disable() {
		btn3.disable();
	}
	function enable() {
		btn3.enable();
	}
	$(document).ready(function() {
		initUI({
			"btn4":{
				label:"按钮4(标签通过预定义的配置实现)",
				width:320,
				onClick:function(e){alert("通过initUI的初始化配置实现点击事件.");}
			}
		});
	});
</script>
<style type="text/css">
html,body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
</style>
</head>
<body>
	<div class="ui-buttonbar">
		<a class="ui-button" label="按钮1"
			left-icon="${ctx }/static/icons/down.png"
			right-icon="${ctx }/static/icons/help.png" fn="{onClick:click}"></a>
		<a class="ui-button" label="按钮2"
			left-icon="${ctx }/static/icons/down.png"
			right-icon="${ctx }/static/icons/help.png" fn="{onClick:click}"></a>
	</div>
	<a class="ui-button" label="按钮3" id="btn3" fn="{onClick:function(){alert('按钮3的事件通过扩展属性fn实现');}}"
		left-icon="${ctx }/static/icons/down.png" width="100"
		right-icon="${ctx }/static/icons/help.png"></a>
		

	<input type="button" value="更改btn3的标签" onclick="changeLabel();">
	<input type="button" value="禁用" onclick="disable();">
	<input type="button" value="启用" onclick="enable();">
	<!--  -->
	<br/>
	<button class="ui-button" id="btn4"
		left-icon="${ctx }/static/icons/down.png"
		right-icon="${ctx }/static/icons/help.png"></button>
		
		
	<button class="ui-button" id="btn5" click="function(e){alert('按钮5的事件通过扩展的属性实现');}" label="按钮5"
		right-icon="${ctx }/static/icons/help.png"></button>
		
		
	<button class="ui-button" id="btn6" click="function(e){alert('按钮6的事件同样通过扩展的属性实现');}" label="按钮6"
		right-icon="${ctx }/static/icons/help.png"></button>
</body>
</html>